import {useCallback, useEffect, useState} from 'react'
import './index.scss'
import Tabs from "../../components/tabs";
import useCountdown from "../../hooks/useCountdown";
import Empty from "../../components/empty";
import InfiniteScroll from "../../components/infiniteScoll";
import giftDollar from "./images/gift-dollar.png"
import giftTop1 from "./images/gift-top1.png"
import giftTop2 from "./images/gift-top2.png"
import giftTop3 from "./images/gift-top3.png"
import giftTop4 from "./images/gift-top4+.png"
import giftFire from "./images/gift-fire.png"
import giftCode from "./images/gift-code.png"
import giftSword from "./images/gift-sword.png"
import giftGlory1 from "./images/gift-glory1.png"
import giftGlory2 from "./images/gift-glory2.png"
import giftGlory3 from "./images/gift-glory3.png"
import giftGlory4 from "./images/gift-glory4.png"
import moreImg from "./images/more.png"
import online from "./images/online.png"

const data = Array(30).fill(1)
const target = new Date("2022-06-06 10:10:10")
const TAB_DATA = [
  {
    name: 'Peringkat Host',
    tab: 0,
    apiKey: '',
  },
  {
    name: 'Peringat Sultan',
    tab: 1,
    apiKey: '',
  },
]
const GIFT_DATA = [
  [
    [
      {
        url: giftDollar,
        text: 500,
      },
      {
        url: giftFire,
        text: '600x15hari',
      },
      {
        url: giftTop1,
        text: 'x30hari',
      },
    ], // 1
    [
      {
        url: giftDollar,
        text: 300,
      },
      {
        url: giftFire,
        text: '500x12hari',
      },
      {
        url: giftTop2,
        text: 'x30hari',
      },
    ], // 2
    [
      {
        url: giftDollar,
        text: 10,
      },
      {
        url: giftFire,
        text: '400x10hari',
      },
      {
        url: giftTop3,
        text: 'x30hari',
      },
    ], // 3
    [
      {
        url: giftFire,
        text: '300x10hari',
      },
      {
        url: giftTop4,
        text: 'x30hari',
      },
    ], // 4
    [
      {
        url: giftFire,
        text: '300x8hari',
      },
      {
        url: giftTop4,
        text: 'x20hari',
      },
    ], // 5
    [
      {
        url: giftFire,
        text: '300x6hari',
      },
      {
        url: giftTop4,
        text: 'x15hari',
      },
    ], // 6
    // 7 ~ 10
    ...Array(4).fill([
      {
        url: giftFire,
        text: '200x6hari',
      },
      {
        url: giftTop4,
        text: 'x7hari',
      },
    ]),
    // 11 ~ 20
    ...Array(10).fill([
      {
        url: giftFire,
        text: '200x6hari',
      },
      {
        url: giftTop4,
        text: 'x3hari',
      }
    ])
  ],
  [
    [
      {
        url: giftCode,
        text: '11111111',
      },
      {
        url: giftSword,
        text: 'x10',
      },
      {
        url: giftGlory1,
        text: 'x7hari',
      },
    ], // 1
    [
      {
        url: giftSword,
        text: 'x5',
      },
      {
        url: giftGlory2,
        text: 'x7hari',
      },
    ], // 2
    [
      {
        url: giftSword,
        text: 'x3',
      },
      {
        url: giftGlory3,
        text: 'x7hari',
      },
    ], // 3
    [
      {
        url: giftSword,
        text: 'x2',
      },
      {
        url: giftGlory4,
        text: 'x7hari',
      },
    ], // 4
    [
      {
        url: giftSword,
        text: 'x1',
      },
      {
        url: giftGlory4,
        text: 'x3hari',
      },
    ], // 5
    // 6 ~ 10
    ...Array(10).fill([
      {
        url: giftGlory4,
        text: 'x3hari',
      },
    ])
  ]
]
const SLICE = 6

function HonorRank() {
  const [activeTab, setActiveTab] = useState(TAB_DATA[0])
  const [, {days, hours, minutes, seconds}] = useCountdown({
    targetDate: target,
    onEnd: () => {
      console.log("countdown is over")
    }
  })
  const [showLast, setShowLast] = useState(false)
  const [showMore, setShowMore] = useState(true)
  const [sliceIndex, setSliceIndex] = useState(SLICE)

  const handleChange = d => {
    setActiveTab(d)
    setSliceIndex(SLICE)
  }

  const openLast = () => {
    setShowLast(true)
  }

  const closeLast = () => {
    setShowLast(false)
  }

  const openRule = () => {
    window.location.href = "/layout/honor/rule"
  }

  const loadData = () => {
    setTimeout(() => {
      setSliceIndex(d => d + SLICE)
    }, 1000)
  }

  useEffect(() => {
    setShowMore(sliceIndex < data.length)
  }, [sliceIndex, data.length])

  const refresh = () => {
    setSliceIndex(SLICE)
  }

  const lookMe = () => {
    console.log('look me')
  }

  const toLiveRoom = () => {
    console.log('toLiveRoom')
  }

  const tab = activeTab.tab
  const isEmpty = data.length < 1

  const renderGiftList = useCallback((giftData) => {
    if(showLast || giftData.length < 1) {
      return null
    }
    return (
      <section className="bottom">
        <div className="gift-icon"/>
        <ul className="gift-list">
          {giftData.map(d => (
            <li>
              <img src={d.url} alt=""/>
              <span>{d.text}</span>
            </li>
          ))}
        </ul>
      </section>
    )
  }, [showLast])

  const renderItem = useCallback((d, i) => {
    const giftData = GIFT_DATA[tab][i] || []
    const hasGift = giftData.length > 0 && !showLast

    return (
      <div key={d}>
        <section className={`top ${hasGift ? 'top-bottom' : ''}`}>
          <div className="rank-num" onClick={toLiveRoom}>
            {i > 2 ? (i + 1) : ''}
            <img src={online} alt="" className="online-img"/>
          </div>
          <div className="avatar" onClick={toLiveRoom}>
            <img src="" alt=""/>
          </div>
          <div className="user-info" onClick={toLiveRoom}>
            <p className="name">name</p>
            {
              i <= 2 && !showLast && (
                <p className="info">{i === 0 ? 'Tempat pertama' : 'kurang dari yang sebelumnya'}</p>)
            }
            <p className="num">12000W</p>
          </div>
          <div className="look-btn">
            <button onClick={lookMe}>ikut</button>
          </div>
        </section>

        {renderGiftList(giftData)}
      </div>
    )
  }, [tab, showLast, GIFT_DATA])

  const renderLoading = useCallback(() => (
    <div className="more">
      <img src={moreImg} alt=""/>
      <span>more</span>
    </div>
  ), [])

  const renderFooter = useCallback(() => {
    if (showLast || tab === 0) {
      return null
    }
    return (
      (
        <li className="item item-self">
          <section className="top">
            <div className="rank-num">
              999+
            </div>
            <div className="avatar">
              <img src="" alt=""/>
            </div>
            <div className="user-info">
              <p className="name">
                name
                <p className="num">999955</p>
              </p>
              <p className="info">
                kurang dari yang sebelumnya
                <p className="num">999955</p>
              </p>
            </div>
          </section>
        </li>
      )
    )
  }, [showLast, tab])

  return (
    <div className={`HonorRank ${showLast ? 'HonorRank-last' : ''}`}>
      {!showLast && <button className="last-btn" onClick={openLast}>Peringat Babak Lalu</button>}
      {showLast && <button className="return-btn" onClick={closeLast}>return</button>}
      <button className="rule-btn" onClick={openRule}>Aturan</button>

      <main>
        {!showLast &&
        <button className="refresh-btn" onClick={refresh}>
          <div/>
        </button>
        }
        <Tabs data={TAB_DATA} onChange={handleChange}/>

        {!showLast &&
        <div className="countdown">
          <span className="time">{days}H</span><span className="dot">:</span>
          <span className="time">{hours}J</span><span className="dot">:</span>
          <span className="time">{minutes}M</span><span className="dot">:</span>
          <span className="time">{seconds}D</span>
        </div>
        }

        {
          isEmpty ?
            <Empty text="no data" style={{color: 'white', marginTop: '10vw'}}/>
            : (
              <InfiniteScroll
                className={`rank-list rank-list-${tab}`}
                data={data.slice(0, sliceIndex)}
                renderItem={renderItem}
                itemClassName={"item item-rank"}
                loadData={loadData}
                more={showMore}
                renderLoading={renderLoading}
                renderFooter={renderFooter}
              />
            )
        }
      </main>
    </div>
  )
}

export default HonorRank
